<template>
  <wd-navbar custom-class="navbar-custom" :bordered="false" fixed placeholder safeAreaInsetTop>
    <template #left>
      <view class="text-[36rpx] font-bold text-[#003309]">学习</view>
    </template>
  </wd-navbar>
  <view class="w-full flex items-center justify-center py-[80rpx] box-border" style="flex-direction: column;">
    <!-- 第一个按钮 -->
    <view 
      style="border: 2rpx solid #6bed91;padding: 20rpx;background-color: transparent;"
      class="w-[520rpx] h-[196rpx] rounded-[28rpx] mb-[70rpx]"
      @click="handleToPage(1)"
    >
      <view 
        style="box-sizing: border-box;"
        class="w-full h-full rounded-[25rpx] flex items-center justify-between px-[30rpx] relative overflow-hidden"
      >
        <image 
          src="../../static/images/bg1.png" 
          class="absolute top-0 left-0 w-full h-full" 
          mode="aspectFill"
        />
        <view class="relative left-[80rpx] z-10 text-[36rpx] color-[#003309] text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)] flex flex-col">
          <text>强脑科技</text>
          <text>产品培训</text>
        </view>
        <image 
          src="/src/static/images/icon1.png" 
          class="relative z-10 w-[144rpx] h-[132rpx]" 
          mode="aspectFit"
        />
      </view>
    </view>
    
    <!-- 第二个按钮 -->
    <view 
      style="border: 2rpx solid #4a904f;padding: 20rpx;background-color: transparent;"
      class="w-[520rpx] h-[196rpx] rounded-[28rpx]"
      @click="handleToPage(2)"
    >
      <view 
        style="box-sizing: border-box;"
        class="w-full h-full rounded-[25rpx] flex items-center justify-between px-[30rpx] relative overflow-hidden"
      >
        <image 
          src="../../static/images/bg2.png" 
          class="absolute top-0 left-0 w-full h-full" 
          mode="aspectFill"
        />
        <view class="relative left-[80rpx] z-10 text-[36rpx] color-white text-shadow-[1px_0px_1px_rgba(0,0,0,0.2)] flex flex-col">
          <text>茶叶产品</text>
          <text>培训</text>
        </view>
        <image 
          src="/src/static/images/icon2.png" 
          class="relative z-10 w-[144rpx] h-[86rpx]" 
          mode="aspectFit"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
defineOptions({
  name: 'Study',
})
definePage({
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'custom',
    navigationBarTitleText: '学习',
  },
})

const handleToPage = (index) => {
  if (index === 1) { // 强脑科技产品培训
    uni.navigateTo({ url: '/pages-children/productListByStudy/index' })
  }
  if (index === 2) { // 茶叶产品培训
    uni.navigateTo({ url: '/pages-children/traeProductTraining/index' })
  }
}
</script>

<style>
page{
  background-color: #F1F1F1;
}
</style>

<style lang="scss" scoped>
//
</style>

